import React from 'react'; 
import FolderStore from "../stores/FolderStore";
import ContextMenu from "./ContextMenu";
function colsShow(title, colsOption)  {
    var ret;
    _.each(colsOption, function(col){
        if(col.title == title){
            if(!col.show){
                ret = "hide";
            }
        }
    });
    return ret;
}
var SearchItem = React.createClass({
    getInitialState: function() {
        var node = this.props.node;
        return {        
            selected: false,
            mouseover: false,
            mark: false,
            editable: false
        };
    },   
    componentDidMount: function(){                  
    },
    componentWillUnmount: function(){
        this.selected(false);
    },
    handleMouseOver: function() {           
        this.setState({
            mouseover : true
        });
    },
    handleMouseOut: function() {
         this.setState({
            mouseover : false
        });
    },
    markItem: function(bMark){            
        this.setState({"mark":bMark});              
    },
    onClick: function(event){            
        FolderStore.setSelectedObject(this.props.node);                  
        this.toggleSelected();            
    },  
    onDBClick: function() {
        window.previewByDocumentId(this.props.node.id);               
    },
    selected : function(bSelected){   
        var oldSelectedItem = this.props.parent.oldSelectedItem;           
        if (bSelected) {
            if (oldSelectedItem && oldSelectedItem !== this) {
                oldSelectedItem.selected(false);
            }
            this.props.parent.oldSelectedItem = this;    
        }
        else {
            if (oldSelectedItem && oldSelectedItem === this){
                this.props.parent.oldSelectedItem = null;
            }
        }
        this.setState({
            selected: bSelected
        });              
    },
    toggleSelected: function(event) {  
        this.selected(!this.state.selected);
    },
    onContextMenu: function(event){    
        event.data = this.props.node;   
    },
    startRename: function(){
        var _this = this;
        this.setState({editable: true});
        _.delay(function(){
            _this.refs.input.focus();
        }, 100);
    },
    onKeyUp: function(event){           
        if (event.keyCode == 13){
            this.refs.input.blur();
            event.preventDefault();
        }          
    },
    endRename: function(){
        this.setState({editable: false});
        var newValue = $(this.refs.input).val();
        window.rename(this.props.node, newValue);
        this.props.node.name = newValue;
    },       
    render: function () {
        var node = this.props.node;
        var description = '';
        if (node.description) {
            description = node.description;
        }
        var itemStyle = {
            backgroundColor: (this.state.mouseover || this.state.mark) && !this.state.editable? "#9accef":"",
            color: (this.state.mouseover || this.state.mark) && !this.state.editable ? "#ffffff":"",
            cursor:'default'
        };                   

        var classes = {
            'fa fa-file-text-o' : (node.type != 'cmis:folder'),
            'fa fa-folder' : (node.type == 'cmis:folder')
        };        

        var nameItem;
        if (this.state.editable){
            nameItem = (<input ref="input" onKeyUp={this.onKeyUp} onBlur={this.endRename} style={{width:'90%'}} defaultValue={node.name}></input>)
        }    
        else{
             nameItem = (<span>{node.name}</span>)
        }
        return (  
                <tr style={{cursor:"default"}} 
                    onContextMenu={this.onContextMenu} 
                    onDoubleClick={this.onDBClick} 
                    onClick={this.onClick} 
                    className={classNames({'color-blue-e': this.state.selected})}>                              
                    <td className={"width-50 break-word " + colsShow("Name", this.props.colsOption)}><i style={{marginRight:"3px"}} className={classNames(classes)}></i>{nameItem}</td>
                    <td className={colsShow("Owner", this.props.colsOption)}>{node.owner}</td>
                    <td className={colsShow("Last modified", this.props.colsOption)}>{node.time}</td>
                    <td className={colsShow("File size", this.props.colsOption)}>{bytes(node.size)}</td>
                    <td className={colsShow("Description", this.props.colsOption)}>{node.description}</td>   
                </tr>  
        )
    }
}); 
export default React.createClass({
    getInitialState: function () {
        return {};
    },
    onContextMenu: function(event){              
        event.preventDefault();
        event.stopPropagation();  
        var node = event.data;          
        this.setState({contextMenuContext: node});                          
        var _this = this;
        var clientX = event.clientX;
        var clientY = event.clientY;
        _.defer(function(){       
            $("#menu-document").trigger("position", {left: clientX, top:clientY})
        }) 
    },  
    componentDidMount: function() { 
        $(document).bind("click",function(e){
            var target  = $(e.target);
            if(target.closest("#class-list").length == 0){
                $("#menu-document").hide();                  
            }
        })  
    },
    render: function () {
        var data = this.props.data; 
        var header = [];      
        var body = [];
        var startIdx = this.props.startIdx;
        var endIdx = this.props.endIdx;
        var _this = this;
        var header = (
            <tr key="header" ref="header">
                <th className={colsShow("Name", _this.props.colsOption)}>Name</th>
                <th className={colsShow("Owner", _this.props.colsOption)}>Owner</th>
                <th className={colsShow("Last modified", _this.props.colsOption)}>Last modified</th>
                <th className={colsShow("File size", _this.props.colsOption)}>File size</th>
                <th className={colsShow("Description", _this.props.colsOption)}>Description</th></tr>
            )
        if (data) {
            var _this = this;
            _.each(data, function (node, index) {
                if (index >= startIdx && index < endIdx){
                    body.push(<SearchItem key={node.id} node={node} parent={_this} colsOption={_this.props.colsOption}></SearchItem>)                      
                }
            });
        }
        var classes = {
            'table' : true,
            'table-hover' : true
        }
        var contextMenuItem;
        var context = this.state.contextMenuContext;
        if (context){
            contextMenuItem = (<ContextMenu context={context}></ContextMenu>);
        }
           
        return (      
            <div className = "table-responsive">           
                <table onContextMenu={this.onContextMenu} className = {classNames(classes)}>
                    <thead>{header}</thead>
                    <tbody id='class-list'>{body}</tbody>             
                </table>
                {contextMenuItem}
            </div>
        )
    }
});
